<template>
  <!-- 用户注册弹框 -->
  <el-dialog
    title="用户注册"
    :visible.sync="registDialogVisible"
    width="25%"
    @open="openDialog"
    :before-close="beforeCloseDialog"
  >
    <el-form :model="params" ref="params" label-position="left" :rules="rules">
      <el-form-item size="small" prop="username">
        <el-input
          v-model="params.username"
          autocomplete="off"
          size="mini"
          prefix-icon="fa fa-user"
          placeholder="用户名"
        ></el-input>
      </el-form-item>
      <el-form-item size="small" prop="formPassword">
        <el-input
          v-model="params.formPassword"
          :type="password"
          autocomplete="off"
          size="mini"
          prefix-icon="fa fa-key"
          placeholder="密码"
        ></el-input>
      </el-form-item>
      <el-form-item size="small" prop="phone">
        <el-input
          v-model="params.phone"
          autocomplete="off"
          size="mini"
          maxlength="11"
          prefix-icon="fa fa-mobile"
        ></el-input>
      </el-form-item>
      <el-form-item size="small" prop="email">
        <el-input
          v-model="params.email"
          autocomplete="off"
          size="mini"
          maxlength="20"
          prefix-icon="fa fa-envelope"
        ></el-input>
      </el-form-item>
      <el-form-item size="mini" prop="captcha">
        <el-input
          v-model="params.captcha"
          size="mini"
          prefix-icon="fa fa-check"
          placeholder="验证码"
        ></el-input>
      </el-form-item>
      <el-form-item size="mini">
        <el-image
          :src="image"
          class="captcha"
          @click="acquireCaptcha"
        ></el-image>
      </el-form-item>
      <el-form-item size="mini">
        <el-button type="danger" size="mini" @click="cancelAdd"
          >取 消</el-button
        >
        <el-button type="primary" size="mini" @click="confirmAdd"
          >确 定</el-button
        >
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import { register, getCaptcha } from "@/components/api/login";
import Constants from "@/components/util/Constants";
import md5 from "js-md5";

export default {
  name: "Regist",
  props: {
    registDialogVisible: Boolean,
  },
  data() {
    return {
      params: {
        username: null,
        formPassword: null,
        password: null,
        phone: null,
        email: null,
        captcha: null,
      },
      password: Constants.PASSWORD,
      image: null,
      rules: {
        username: [
          {
            required: true,
            min: 5,
            max: 12,
            message: "输入用户名,长度在5-12个字符",
            trigger: "blur",
          },
        ],
        formPassword: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
        ],
        captcha: [
          {
            required: true,
            min: 4,
            max: 4,
            message: "长度在 4 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    cancelAdd() {
      this.$emit("closeRegistDialog");
    },
    confirmAdd() {
      this.$refs["params"].validate((valid) => {
        if (valid) {
          this.params.password = md5(this.params.formPassword);
          register(this.params, (data) => {
            sessionStorage.setItem(Constants.TOKEN, data);
            sessionStorage.setItem(Constants.USER_NAME, this.params.username);
            this.$router.replace(Constants.HOME_PATH);
            this.params.formPassword = null;
          });
        }
      });
    },
    beforeCloseDialog() {
      this.$confirm("确认关闭？")
        .then((_) => {
          this.$emit("closeRegistDialog");
        })
        .catch((_) => {});
    },
    openDialog() {
      this.params = { username: null, password: null, captcha: null };
      this.acquireCaptcha();
    },
    acquireCaptcha() {
      getCaptcha((data) => {
        if (data) {
          this.image = data;
        }
      });
    },
  },
};
</script>

<style scoped>
.captcha {
  width: 25%;
  height: 25px;
}
</style>